@import "mixins";

#heroes-list {
  margin: 2rem;
}

.hero-header__image, mat-card-title, mat-card-subtitle, .mat-card-image {
  cursor: pointer;
}

.hero-card {
  @include push--auto(2rem);
}

.progress__spinner {
  @include push--auto();
}

@media (max-width: 680px) {
  .hero-card {
    width: 80%;
    @include push--auto();
  }

  .mat-card {
    margin-bottom: 2rem;
  }
}